<template>
  <div class="product-detail">
    <div class="container">
      <div class="sidebar">
        <h2 class="section-title">{{ $t('products.recommended') }}</h2>
        <div class="recommended-products">
          <div
            v-for="recommended in recommendedProducts"
            :key="recommended.id"
            class="recommended-link"
            @click="handleViewProduct(recommended)"
          >
            <div class="link-content">
              <el-icon><Link /></el-icon>
              <span class="recommended-name">{{ recommended.name }}</span>
            </div>
            <span class="recommended-price">¥{{ recommended.price }}</span>
          </div>
        </div>
      </div>
      <div class="main-content">
        <div class="image-gallery" v-if="product && product.images">
          <img
            v-for="(image, index) in product.images.split(',')"
            :key="index"
            :src="image"
            :alt="product.name"
            class="product-image"
          />
        </div>
        <div v-else>
          <p>{{ $t('products.noImages') }}</p>
        </div>
        <div class="product-info">
          <h1 class="product-title">{{ product?.name }}</h1>
          <p class="product-description">{{ product?.description }}</p>
          <div class="product-details">
            <p class="product-power">{{ $t('products.power') }}: <span>{{ product?.power }}W</span></p>
            <p class="product-temperature">{{ $t('products.colorTemperature') }}: <span>{{ product?.temperature }}K</span></p>
            <span class="price">¥{{ product?.price }}</span>
          </div>
          <el-button type="primary" @click="addToCart">{{ $t('products.addToCart') }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/store/user'
import { getProductById, getRecommendedProducts } from '@/api/product'
import type { Product } from '@/types'
import { View, Link } from '@element-plus/icons-vue'

const route = useRoute()
const userStore = useUserStore()
const product = ref<Product | null>(null)
const recommendedProducts = ref<Product[]>([])

const fetchProduct = async (productId: number) => {
  try {
    product.value = await getProductById(productId)
  } catch (error) {
    console.error('获取产品失败:', error)
  }
}

const fetchRecommendedProducts = async () => {
  try {
    recommendedProducts.value = await getRecommendedProducts()
  } catch (error) {
    console.error('获取推荐产品失败:', error)
  }
}

const addToCart = () => {
  // 添加到购物车的逻辑
}

const handleViewProduct = async (recommended: Product) => {
  await fetchProduct(recommended.id)
}

onMounted(() => {
  const productId = Number(route.params.id)
  fetchProduct(productId)
  fetchRecommendedProducts()
})
</script>

<style scoped lang="scss">
.product-detail {
  display: flex;
  min-height: 100vh;

  .container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 30px;

    @media (max-width: 768px) {
      flex-direction: column;
    }

    .sidebar {
      width: 300px;
      flex-shrink: 0;

      @media (max-width: 768px) {
        width: 100%;
      }

      .section-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        position: relative;
        color: var(--text-primary);
        padding-bottom: 0.5rem;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 50px;
          height: 3px;
          background: var(--primary-color);
          border-radius: 3px;
        }
      }

      .recommended-products {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .recommended-link {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 15px;
          border-radius: 8px;
          background: var(--bg-secondary);
          cursor: pointer;
          transition: all 0.2s ease;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
          
          &:hover {
            background: var(--bg-hover);
            transform: translateX(5px);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
          }
          
          .link-content {
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 80%;
            
            .el-icon {
              color: var(--primary-color);
              font-size: 0.9rem;
            }
            
            .recommended-name {
              font-size: 0.95rem;
              color: var(--text-primary);
              font-weight: 500;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          
          .recommended-price {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--primary-color);
          }
        }
      }
    }

    .main-content {
      flex: 1;
      
      .image-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 20px;

        .product-image {
          width: 100%;
          max-width: 300px;
          height: auto;
          object-fit: cover;
          margin: 10px;
          border-radius: 10px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
      }

      .product-info {
        text-align: left;
        width: 100%;

        .product-title {
          font-size: 2rem;
          font-weight: bold;
          color: var(--text-primary);
          margin-bottom: 10px;
        }

        .product-description {
          font-size: 1.2rem;
          color: var(--text-secondary);
          margin: 10px 0;
        }

        .product-details {
          font-size: 1rem;
          color: var(--text-secondary);
          margin: 10px 0;

          span {
            font-weight: bold;
          }
        }

        .price {
          font-size: 1.5rem;
          color: var(--primary-color);
          margin: 10px 0;
        }
      }
    }
  }
}
</style>
